<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>LED时钟</title>
		<link rel="stylesheet" href="css/led.css"/>
		<script src="js/vue.js"></script>
	</head>
	<style>
	    body {
	        background-color: #000;
	    }
		.circle{
			display: inline-block;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: #c00;
			position: relative;
			top: -90px;
		}
	</style>
	<body>
		<div id='app'>
			<my-led v-for='i in hour' :value='number[i]'></my-led>
			<span class="circle"></span>
			<my-led v-for='i in minute' :value='number[i]'></my-led>
			<span class="circle"></span>
			<my-led v-for='i in second' :value='number[i]'></my-led>
		</div>
		<script src="js/led.js"></script>
		<script>
			Vue.createApp({
				components:{
					'my-led':Led
				},
				data(){
					return{
						number:[
							[1,1,1,1,1,1,0],
							[0,1,1,0,0,0,0],
							[1,1,0,1,1,0,1],
							[1,1,1,1,0,0,1],
							[0,1,1,0,0,1,1],
							[1,0,1,1,0,1,1],
							[1,0,1,1,1,1,1],
							[1,1,1,0,0,0,0],
							[1,1,1,1,1,1,1],
							[1,1,1,1,0,1,1]
						],
						hour:[1,0],  // 小时的十位 个位
						minute:[0,0],
						second:[0,0]
					}
				},
				created() {
					setInterval(this.getTime,1000)
				},
				methods:{
					getTime(){  //获取当前时分秒
						var now=new Date()
						let hour=now.getHours()
						this.hour[0]=parseInt(hour/10)  //十位
						this.hour[1]=hour%10  //个位
						let minute=now.getMinutes()
						this.minute[0]=parseInt(minute/10)  //十位
						this.minute[1]=minute%10  //个位
						let second=now.getSeconds()
						this.second[0]=parseInt(second/10)  //十位
						this.second[1]=second%10  //个位
					}
				}
			}).mount('#app')
		</script>
	</body>
</html>